<template>
  <div>
    <el-card class="box-card" :loading="loading">
      <div slot="header" class="clearfix">
        <el-row>
          <el-col :span="18">  
            <el-progress :text-inside="true" :stroke-width="24" :percentage="percentage"></el-progress>
          </el-col>
          <el-col :span="4" :offset="1">
            当前第{{index+1}}题/共{{exams.length}}题
          </el-col>
        </el-row>
      </div>
      <el-row>
       <el-header style="line-height:10px"><h3> <i class="el-icon-s-promotion"></i>[ 选择题 ]</h3></el-header>
      </el-row>
      <div v-for="(item,i) in exam" :key="i">
        <el-row>
          <el-col :span="1"><el-avatar size="small">{{index+1}}</el-avatar></el-col>
        <p class="text item title">{{item.title}}</p>
        </el-row>
        <!-- <div v-for="o in item.answers" :key="o" class="text item" style="width:100%"> -->
          <el-row>
            <el-radio style="width:100%" v-model="radio1" :label="item.option_a" border>{{item.option_a}}</el-radio>
          </el-row>
          <el-row>
            <el-radio style="width:100%" v-model="radio1" :label="item.option_b" border>{{item.option_b}}</el-radio>
          </el-row>
          <el-row>
            <el-radio style="width:100%" v-model="radio1" :label="item.option_c" border>{{item.option_c}}</el-radio>
          </el-row>
          <el-row>
            <el-radio style="width:100%" v-model="radio1" :label="item.option_d" border>{{item.option_d}}</el-radio>
          </el-row>
        <!-- </div> -->
        <el-row>
          <el-col :span="10" :offset="15">
          <el-button-group>
            <el-button type="primary" @click="PreExam(item,index)" icon="el-icon-arrow-left">上一题</el-button>
            <el-button type="primary" @click="NextExam(item,index)">下一题<i class="el-icon-arrow-right el-icon--right"></i></el-button>
            <el-button type="primary" @click="onSubmit()">确认提交</el-button>
          </el-button-group>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'index',
  data(){
    return {
      loading:true,
      radio1: '1',
      exam:[],
      index:0,
      percentage: 0,
      exams:[{
              "question": "“大煮干丝”是哪个菜系的代表菜之一( )。",
              "answers": {
                  "A": "四川菜系",
                  "B": "山东菜系",
                  "C": "广东菜系",
                  "D": "淮扬菜系"
              },
              "correctAnswer": "D"
          },
          {
              "question": "红茶属于( )茶。",
              "answers": {
                  "A": "半发酵",
                  "B": "发酵",
                  "C": "不发酵",
                  "D": "微发酵"
              },
              "correctAnswer": "A"
          },
          {
              "question": "满汉全席起兴于（ ）。",
              "answers": {
                  "A": "清代",
                  "B": "唐代",
                  "C": "宋代",
                  "D": "两汉"
              },
              "correctAnswer": "A"
          },
          {
              "question": "麻婆豆腐兴起于（ ）。",
              "answers": {
                  "A": "清代",
                  "B": "唐代",
                  "C": "宋代",
                  "D": "两汉"
              },
              "correctAnswer": "ABC"
          }
        ],
        answer:{
            "singlechoiceresults_id":12,
            "singlechoice_id":36,
            "user_id":12,
            "user_option":"a"
      }
    }
  },
  mounted(){
    this.$http.put('/api/getTestPaper',{'examination_id':1})
        .then(response=> {
          if(response.data.code=='904'){
              this.exams = response.data.data
              this.percentage = Math.round(100/(this.exams.length))
              this.exam = this.exams.filter((item,index)=>{
                if(index==0){
                  return item;
                }
              })
          }else{
            this.$message({
              type: 'error',
              message: response.data.message
            });
          }
          
        })
        .catch(function (error) {
          console.log(error);
        });
    // this.exam = this.exams.filter((item,index)=>{
    //   if(index==0){
    //     return item;
    //   }
    // })
    // this.percentage = 100/this.exams.length;
  },
  methods:{
    onSubmit(){
      this.$http.post('/api/submitsinglechoiceresults',this.answer
                    //  this.qs.stringify(this.answer),
                    //  {headers:{
                    //    'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'
                    //  }}
                     )
                .then(response=>{
                  this.$message({
                      type: 'success',
                      message: '提交成功'
                    });
                }).catch(error=>{console.log(error)})
    },
    NextExam(i,d){
      if(this.index < this.exams.length-1){
        ++this.index;
        this.exam = this.exams.filter((item,index)=>{
          if(index == this.index){
            return item;
          }
        });
        this.percentage += Math.floor(100/this.exams.length);
        console.log(this.exams.length)
        if (d+2 == this.exams.length) {
          this.percentage = 100;
        }
      }else{
        alert("已经做完了")
      }
    },
    PreExam(i,d){
      if(this.index > 0){
        --this.index;
        this.exam = this.exams.filter((item,index)=>{
          if(index == this.index){
            return item;
          }
        });
        this.percentage -= Math.floor(100/this.exams.length);
        if (this.percentage > 100) {
          this.percentage = 100;
        }
      }else{
        alert("已经到顶了")
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.text {
    font-size: 25px;
  }

  .item {
    margin-bottom: 20px;
  }
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}
.title{
  font-size: 18px;
}
</style>
